<template>
    <div class="topNav Gwidth">
		<div class="item" v-for="item in list" :key="item.id" >
			<nuxt-link :to="'/shop/list?id='+item.id" target="_blank">
				<div class="ico">
					<img :src="item.pc_icon" :alt="item.name" :title="item.name">
				</div>
				<div class="title">{{item.name}}</div>
            </nuxt-link>
		</div>
	</div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'

export default {
    
    data(){
        return{
            list:[]
        }
    },
    created(){
        this.getIndexCategory()
    },
    computed:{
		...mapState(['address','venue'])
	},
    methods:{
		// 场馆分类
		async getIndexCategory() {
			let {data:{code,data}} = await this.$http.post(this.$API.index.getIndexCategory,{})
			if(code==200){
				this.list = data.data
				this.$store.commit('ChangeVenue',data.data);
			}
		},
        // 跳转
		ToPage(url,id){
			let routeData = this.$router.resolve({path:url,query:{id:id}})
			window.open(routeData.href, '_blank');
		},
    },
    
}
</script>
<style scoped>
    /* ico导航分类 */
	.topNav{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:30px 0;
		border-bottom: 1px solid #eeeeee;
	}
	.topNav .item{
		text-align: center;
		font-size: 0;
		cursor: pointer;
	}
	.topNav .item .title{
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}
	.topNav .item .ico,.topNav .item .ico img{
		width: 120px;
		height: 70px;
	}
</style>
